import React from 'react';
import { SafeAreaView, Text, View } from 'react-native';
import { SwiperR } from './src/swiper/swiper';
// import { SwiperR } from './src/swiper/swiper';

const App = () => {
  return (
    // eslint-disable-next-line react-native/no-inline-styles
    <SafeAreaView style={{ flex: 1 }}>
      <SwiperR
        autoPlay={true}
        cardSetting={{ cardSpace: 90, cardSmallSide: 20, cardSide: 200 }}
        mode={'normal'}
        style={{ width: '100%', height: 100 }}>
        <View
          style={{
            backgroundColor: 'pink',
            flex: 1,
            height: 100,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text>1</Text>
        </View>
        <View
          style={{
            backgroundColor: 'black',
            flex: 1,
            height: 100,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text style={{ color: 'white' }}>2</Text>
        </View>
        <View
          style={{
            backgroundColor: 'blue',
            flex: 1,
            height: 100,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text style={{ color: 'white' }}>3</Text>
        </View>
        <View
          style={{
            backgroundColor: 'green',
            flex: 1,
            height: 100,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text style={{ color: 'white' }}>4</Text>
        </View>
      </SwiperR>
    </SafeAreaView>
  );
};

export default App;
